// 书写一个函数式table组件
export default {
    props: {
        columns: {
            type:Array,
            default: () => []
        }, datas: {
            type:Array,
            default: () => []
        }
    },
    data(){
        return {
            // 复制一份副本，用于加工结构化，方便展示数据
            columns_:[],
            rows_:[]
        }
    },
    created(){
        this.columns_ = this.columns.map((col,index)=>{
            col._sortType = 'normal'
            col._index = index
            return col
        })
        this.rows_ = this.datas.map((row,index)=>{
            row._index = index
            return row
        })
    },
    methods:{
        sortByAsc(index){
            // 先处理其他列的排序状态
            this.columns_.forEach(col=>{
                col.sortType = 'normal'
            })
            // 再处理当前列的状态
            this.columns_[index].sortType = 'asc';
            // 开始排序
            const key = this.columns_[index].key
            this.rows_.sort((a,b)=>a[key]>b[key]?1:-1)
        },
        sortByDesc(index){
            // 先处理其他列的排序状态
            this.columns_.forEach(col=>{
                col.sortType = 'normal'
            })
            // 再处理当前列的状态
            this.columns_[index].sortType = 'desc';
            // 开始排序
            const key = this.columns_[index].key
            this.rows_.sort((a,b)=>a[key]<b[key]?1:-1)
        }
    },
    render: function(h) {
        const ths = []
        const trs = []
        // 生成头部
        this.columns_.forEach((col, index) => {
            if (col.sortable) {
                ths.push(h('th', null, [
                    h('span', null, col.title),
                    h('a', { class: { red: col.sortType === 'asc' }, on: { click:()=> { this.sortByAsc(index) } } }, '升序'),
                    h('a', { class: { red: col.sortType === 'desc' }, on: { click:()=> { this.sortByDesc(index) } } }, '降序'),
                ]))
            } else {
                ths.push(h('th', null, col.title))
            }

        })
        // 生成tbody的数据行
        this.rows_.forEach((row) => {
            // 每次生成一行
            const tds = []
            // 拿到值
            this.columns_.forEach(col => {
                tds.push(h('td', row[col.key]))
            })
            trs.push(h('tr', tds))
        })
        return h('table', null, [
            h('thead', null, [
                h('tr', null, ths)
            ]),
            h('tbody', null, trs)
        ])
    }
}